<!DOCTYPE html>
<html lang="zh-cn">

<head>

  <meta content="text/html;charset=utf-8" http-equiv="content-type">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

  <title>滑雪族 - 订单详情</title>

  <!-- Bootstrap Core CSS -->
<!-- MetisMenu CSS -->
<!-- Custom CSS -->
<!-- Custom Fonts -->
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->

    <link rel="stylesheet" href="/server/r/bower_components/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/server/r/bower_components/metisMenu/dist/metisMenu.min.css" />
    <link rel="stylesheet" href="/server/r/static/css/sb-admin-2_e507c2b.css" />
    <link rel="stylesheet" type="text/css" href="/server/r/bower_components/font-awesome/css/font-awesome.min.css" />
    <link type="text/css" rel="stylesheet" href="/server/r/static/css/hxz/common_2baa698.css" />
    <link rel="stylesheet" type="text/css" href="/server/r/bower_components/alertify/themes/alertify.core.css" />
    <link rel="stylesheet" type="text/css" href="/server/r/bower_components/alertify/themes/alertify.bootstrap.css" />
</head>

<body>

<div id="wrapper">
  <input type="hidden" id="orderId" value="${order.orderId!''}">
  <!-- Navigation -->
  <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">

    <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="activity-list">滑雪族 管理</a>
</div>
<!-- /.navbar-header -->

<ul class="nav navbar-top-links navbar-right">
  <!-- /.dropdown -->
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
    </a>
    <ul class="dropdown-menu dropdown-user">
      <li><a href="/manage/logout"><i class="fa fa-sign-out fa-fw"></i> 退出系统</a>
      </li>
    </ul>
    <!-- /.dropdown-user -->
  </li>
  <!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->

    <div class="navbar-default sidebar" role="navigation">
      <div class="sidebar-nav navbar-collapse">
        <ul class="nav" id="side-menu">
  <li>
    <a href="#"><i class="fa fa-asterisk fa-fw"></i> 产品管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/activity-list"> 产品查询</a>
      </li>
      <li>
        <a href="/manage/manage-organizer-render-activity"> 产品显示控制</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="/#"><i class="fa fa-male fa-fw"></i> 报名管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/player-list"> 报名查询</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#"><i class="fa fa-list-alt fa-fw"></i> 订单管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/order-list"> 订单查询</a>
      </li>
      <li>
        <a href="/manage/refund-list"> 退款管理</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-check-circle fa-fw"></i> 主办方认证<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/organizer-edit"> 创建主办方</a>
      </li>
      <li>
        <a href="/manage/organizer-list"> 主办方列表</a>
      </li>
      <li>
        <a href="/manage/organizer-print"> 冬令营打印设置</a>
      </li>

    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-picture-o fa-fw"></i> 雪场管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/ski-field-edit"> 创建雪场</a>
      </li>
      <li>
        <a href="/manage/ski-field-list"> 雪场列表</a>
      </li>

    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-users fa-fw"></i> 教练管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/coach-list"> 预约情况</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-credit-card fa-fw"></i> 结算管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/manage-transfer-list"> 转账管理</a>
      </li>
      <li>
        <a href="/manage/manage-withdrawals-apply-list"> 提现申请</a>
      </li>
      <li>
        <a href="/manage/manage-withdrawals-record-list"> 结算列表</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-rmb fa-fw"></i> 财务管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/stream-list"> 交易流水</a>
      </li>
      <li>
        <a href="/manage/manage-bill-record-list"> 对账列表</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-dollar fa-fw"></i> 营销管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/marketing-list"> 返利管理</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-comments fa-fw"></i> 评价管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/comment-list">评价管理</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#"><i class="fa fa-tasks fa-fw"></i> 定时处理管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/quartz-list"> 定时处理列表</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-wechat fa-fw"></i> 微信页面管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/typography-list"> 微信首页管理</a>
      </li>
      <li>
        <a href="/manage/activity-weight-manage"> 活动置顶</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
</ul>
      </div>
      <!-- /.sidebar-collapse -->
    </div>
    <!-- /.navbar-static-side -->
  </nav>

  <div id="page-wrapper">
    <div class="row">
      <div class="col-lg-12">
        <h3 class="page-header">订单详细</h3>
      </div>
      <!-- /.col-lg-12 -->
    </div>

    <!--结算详情的模态窗口-->
    <div class="modal fade" id="order-detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h5 class="modal-title" id="myModalLabel">报名信息</h5>
          </div>
          <div class="modal-body">
            <table class="table table-bordered table-striped">
              <thead></thead>
              <tbody id="order-info">

              </tbody>
            </table>
            <div class="modal-footer">
              <a type="button" id="player-edit" class="btn btn-sm btn-success btn-outline">修改</a>
            </div>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>

    <!-- /.row -->
    <div class="row">
      <div class="col-lg-12">
        <div class="panel panel-default">
          <div class="panel-heading">
            订单信息
          </div>
          <div class="panel-body">

            <div class="col-lg-12">
              <div class="table-responsive">
                <table class="table table-bordered table-striped">
                  <thead></thead>
                  <tbody>
                  <tr>
                    <th>订单号</th>
                    <td colspan="1">${order.code!''}</td>
                    <th>订单状态</th>
                    <td colspan="1">${filterRuler(order.orderStatus,"order")!''}</td>
                  </tr>
                  <tr>
                    <th>创建时间</th>
                    <td colspan="1">${order.createTime?string("yyyy年MM月dd日 HH:mm:ss")}</td>
                    <th>支付时间</th>
                    <td colspan="1">
                      <#if order.payTime??>
                        ${order.payTime?string("yyyy年MM月dd日 HH:mm:ss")}
                      </#if>
                    </td>
                  </tr>
                  <tr>
                    <th>产品名称</th>
                    <td colspan="4">${order.title!''}</td>
                  </tr>
                  <tr>
                    <th>名称</th>
                    <td colspan="4">${order.episodeName!''}</td>
                  </tr>

                  <tr>
                    <th>下单用户</th>
                    <td colspan="4">${order.name!''}</td>
                  </tr>

                  <tr>
                    <th>联系电话</th>
                    <td colspan="4">${order.phone!''}</td>
                  </tr>

                  <tr>
                    <th>种类</th>
                    <td colspan="1">${order.chargeName!''}</td>
                    <th>单价</th>
                    <td colspan="1">
                      <#if order.price??>
                        ${order.price?string("0.##")}元/人
                      </#if>
                    </td>
                  </tr>

                  <tr>
                    <th>数量</th>
                    <td colspan="1">${order.chargeNum!''}</td>
                    <th>总价</th>
                    <td colspan="1">
                      <#if order.totalPrice??>
                        ${order.totalPrice?string("0.##")}元
                      </#if>
                    </td>
                  </tr>

                  <tr>
                    <th>已使用</th>
                    <td colspan="1">${order.chargeNum-order.availableCount!''}</td>
                    <th>支付方式</th>
                    <td colspan="4">${order.payType!''}</td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <!-- /.col-lg-12 -->

          </div>
        </div>
      </div>
      <!-- /.col-lg-12 -->
    </div>
    <!-- /.row -->

    <div class="row">
      <div class="col-lg-12">
        <div class="panel panel-default">
          <div class="panel-heading">
            报名信息 （人数：${order.chargeNum!''}人）
          </div>

          <div class="panel-body">
            <div class="dataTable_wrapper">
              <table class="table table-striped table-bordered table-hover">
                <thead>
                <tr id="player-structure"></tr>
                </thead>
                <tbody id="episode-list-body"></tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <!-- /.col-lg-12 -->
    </div>

    <div class="row">
      <div class="col-lg-12">
        <div class="panel-body text-right">
          <form role="form">
            <div class="form-group">
              <a id="order-back-btn" href="javascript:window.history.go(-1);" class="btn btn-danger">返回</a>
              <a id="order-refund-btn" href="javascript:void(0);" class="btn btn-success" style="display: none;">退款</a>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- /#page-wrapper -->

</div>
<!-- /#wrapper -->
<div id="hxz-background" class="background" style="display: none; "></div>
<div id="hxz-progressBar" class="progressBar" style="display: none; ">数据加载中，请稍等...</div>

<script src="/server/r/require.js"></script>
<script type="text/javascript">/*resourcemap*/
require.config({paths:{
  "r/bower_components/jquery/dist/jquery.min": "/server/r/bower_components/jquery/dist/jquery.min",
  "r/bower_components/underscore/underscore-min": "/server/r/bower_components/underscore/underscore-min",
  "r/static/js/hxz/hxz.valid": "/server/r/static/js/hxz/hxz.valid_12cc206",
  "r/static/js/hxz/hxz.rest": "/server/r/static/js/hxz/hxz.rest_07c8105",
  "r/bower_components/alertify/alertify.min": "/server/r/bower_components/alertify/alertify.min",
  "r/static/js/alertify-config": "/server/r/static/js/alertify-config_0cc8db2",
  "r/bower_components/bootstrap/dist/js/bootstrap.min": "/server/r/bower_components/bootstrap/dist/js/bootstrap.min",
  "r/bower_components/metisMenu/dist/metisMenu.min": "/server/r/bower_components/metisMenu/dist/metisMenu.min",
  "r/bower_components/select2/dist/js/select2": "/server/r/bower_components/select2/dist/js/select2",
  "r/static/js/hxz/hxz.ui": "/server/r/static/js/hxz/hxz.ui_0a7714d",
  "r/static/js/hxz/hxz": "/server/r/static/js/hxz/hxz_589b155"
}});

  var filter = {};
  require(['r/bower_components/jquery/dist/jquery.min', 'r/static/js/hxz/hxz', 'r/bower_components/underscore/underscore-min', 'r/static/js/alertify-config'], function ($, hxz, _, alertify) {
    // 报名信息列表默认只显示列数 更多信息需要点击查看详情
    var columnSize = 5;
    var filter = {};
    var sortBy = [];
    var url = hxz.RestApi.manageOrderDetail;
    var re = /^##.+##/;
    var editPlayerId;

    var playerMeta;
    var playerInfo = [];
    if ($("#orderId").val()) {
      url = url + "?orderId=" + $("#orderId").val();
    }
    function fetchOrderStructure() {
      hxz.doGet({url: url}, function (data) {
        if (data.status == "0") {
          return alertify.log("系统错误");
        }

        if (data.data) {
          for (var i in data.data.playerMeta) {
            sortBy.push(data.data.playerMeta[i].id);
          }
          playerMeta = data.data.playerMeta;
          renderStructure(data.data.playerMeta);
          renderPlayers(data.data.players);
        }
      });
    }


    window.hxz = {};
    window.hxz.playerDetail = function (data) {
      $("#player-edit").css("display","none");
      var playData = playerInfo[data];
      var $orderInfo = $("#order-info");
      $orderInfo.html("");
      for (var i in playerMeta) {
        if (playerMeta[i].type == "select") {
          var selectValue = "";
          for (var j  in playerMeta[i].values) {
            if ((playerMeta[i].values)[j].key == playData[i].value) {
              selectValue = playerMeta[i].values[j].value;
              break;
            }
          }
          $orderInfo.append("<tr><td>" + playerMeta[i].title.replace(re, '') + "</td><td>" + selectValue + "</td></tr>");
        } else {
          if (playerMeta[i].id == "avatar_url") {
            $orderInfo.append("<tr><td>" + playerMeta[i].title.replace(re, '') + "</td>" + "<td><img style='height: 150px;' src='" + playData[i].value + "'/></td>" + "</tr>");
          } else {
            $orderInfo.append("<tr><td>" + playerMeta[i].title.replace(re, '') + "</td><td>" + playData[i].value + "</td></tr>");
          }
        }
      }
      $("#order-detail").modal("show");
    };

    window.hxz.playerEdit = function (data, playerId) {

      $("#player-edit").css('display','');
      editPlayerId = playerId;
      var playData = playerInfo[data];
      var $orderInfo = $("#order-info");
      $orderInfo.html("");
      for (var i in playerMeta) {
        if (playerMeta[i].type == "select") {
          var selectValue = "";
          selectValue += "<select  style='width: 340px;' name='" + playerMeta[i].id + "'>";
          for (var j  in playerMeta[i].values) {
            if ((playerMeta[i].values)[j].key == playData[i].value) {
              selectValue += "<option value ='" + playerMeta[i].values[j].key + "' selected ='selected'>" + playerMeta[i].values[j].value + "</option>";
            } else {
              selectValue += "<option value ='" + playerMeta[i].values[j].key + "'>" + playerMeta[i].values[j].value + "</option>";
            }
          }
          selectValue += "</select>";
          $orderInfo.append("<tr><td>" + playerMeta[i].title.replace(re, '') + "</td><td style='width: 340px;'>" + selectValue + "</td></tr>");
        } else {
          if (playerMeta[i].id == "avatar_url") {
//            $orderInfo.append("<tr><td>" + playerMeta[i].title.replace(re, '') + "</td><td><input type='text' style='width: 340px;' name='" +
//            playerMeta[i].id + "' value='" + playData[i].value + "'></td></tr>");
            $orderInfo.append("<tr><td>" + playerMeta[i].title.replace(re, '') + "</td>" + "<td><img style='height: 150px;' src='" + playData[i].value + "'/></td>" + "</tr>");

          } else {
            $orderInfo.append("<tr><td>" + playerMeta[i].title.replace(re, '') + "</td><td><input type='text' style='width: 340px;' name='" +
            playerMeta[i].id + "' value='" + playData[i].value + "'></td></tr>");
          }
        }
      }
      $("#order-detail").modal("show");
    };

    function renderPlayers(data) {
      var columnLength = 0;
      $("#episode-list-body").html("");
      for (var j = 0; j < data.length; j++) {
        var trString = "";
        trString += "<td>" + (j + 1) + "</td>";
        var tempEnrollInfoList = [];
        for (var sortIndex = 0; sortIndex < sortBy.length; sortIndex++) {
          for (var tmpIndex = 0; tmpIndex < data[j].enrollInfoList.length; tmpIndex++) {
            if (sortBy[sortIndex] == data[j].enrollInfoList[tmpIndex].id) {
              tempEnrollInfoList.push(data[j].enrollInfoList[tmpIndex])
            }
          }
        }
        playerInfo.push(tempEnrollInfoList);
        for (var i in tempEnrollInfoList) {
          columnLength = i;
          if (columnLength >= columnSize) {
            trString += "<td><a  id=\"order-detail-btn\"  type=\"button\" " +
            "onclick=\"hxz.playerDetail(" + j + ")\" class=\"btn btn-success btn-xs\">报名详情</a>";
            break;
          }

          var filterFn = filter["filter_" + tempEnrollInfoList[i].id];
          if (filterFn) {
            var filterFnString = filterFn(tempEnrollInfoList[i].id, tempEnrollInfoList[i].value);
            if (filterFnString) {
              trString += "<td>" + filterFn(tempEnrollInfoList[i].id, tempEnrollInfoList[i].value) + "</td>";
            } else {
              if (tempEnrollInfoList[i].id == "avatar_url") {
                trString += "<td style='width: 160px;'><img style='width: 150px;' src='" + tempEnrollInfoList[i].value + "'/></td>";
              } else {
                trString += "<td>" + tempEnrollInfoList[i].value + "</td>";
              }
            }
          } else {
            if (!tempEnrollInfoList[i].value)
              tempEnrollInfoList[i].value = "";
            if (tempEnrollInfoList[i].id == "avatar_url") {
              trString += "<td style='width: 160px;'><img style='width: 150px;' src='" + tempEnrollInfoList[i].value + "'/></td>";
            } else {
              trString += "<td>" + tempEnrollInfoList[i].value + "</td>";
            }
          }
        }
        if (columnLength >= columnSize) {
          trString += "<a  id=\"order-detail-btn\"  type=\"button\" " +
          "onclick=\"hxz.playerEdit(" + j + "," + data[j].playerId + ")\" class=\"btn btn-success btn-xs\">修改数据</a></td>";
        } else {
          trString += "<td><a id=\"order-detail-btn\"  type=\"button\" " +
          "onclick=\"hxz.playerEdit(" + j + "," + data[j].playerId + ")\" class=\"btn btn-success btn-xs\">修改数据</a></td>";
        }

        $("#episode-list-body").append("<tr>" + trString + "</tr>");
      }
    }

    function renderStructure(data) {
      var dataLength = 0;
      $("#player-structure").html("");
      $("#player-structure").append("<th>序号</th>");

      for (var i in data) {
        dataLength = i;
        if (i >= columnSize) {
          $("#player-structure").append("<th>操作</th>");
          return;
        }
        if (data[i].type == "select") {
          filter["values_" + data[i].id] = data[i].values;
          filter["filter_" + data[i].id] = function (id, filterData) {
            for (var j in filter["values_" + id]) {
              if (filter["values_" + id][j].key == filterData) {
                return filter["values_" + id][j].value;
              }
            }
          }
        }

        $("#player-structure").append("<th>" + data[i].title.replace(re, '') + "</th>")
      }
      if (dataLength < columnSize) {
        $("#player-structure").append("<th>操作</th>");
      }
    }

    function event() {
      $("#player-edit").unbind("click").on("click", function () {
        var data = {};
        var playMeta = {};
        var key;
        data.playerId = editPlayerId;
        $("#order-info input").each(function () {
          key = $(this).attr("name");
          if (key.indexOf("customer-player") >= 0) {
            playMeta[key] = $(this).val();
          } else {
            data[key] = $(this).val();
          }
        });
        $("#order-info select").each(function () {
          key = $(this).attr("name");

          if (key == "gender") {
            data[key] = $(this).val();
          } else if (key == "id_card_type") {
            data[key] = $(this).val();
          } else {
            playMeta[key] = $(this).val();
          }

        });
        data["otherInfo"] = JSON.stringify(playMeta);
        hxz.doPost({url: hxz.RestApi.manageUpdatePlayer, data: data}, function (data) {
          if (data.status == "0") {
            /*弹出提示信息*/
            return alertify.error(data.msg, "danger");
          }
          if (data.status == "1") {
            alertify.log(data.msg);
            window.location.reload(false);
            $("#order-detail").modal("hide");
          }
        });
      });
    }

    function pageInit() {
      fetchOrderStructure();
      event();
    };

    // 执行初始化
    pageInit();

  });

</script>
</body>

</html>
